<template>
  <view class="page">
    <customRangeAna id="page-top-navigate" :style="{'padding-top': safeArea.top + 'px'}" :is-back="true"
                    :is-fixed="true" :show-tabs="true" @update-between-time="handleBetweenTime"
                    @between-choose-index="handleBetweenTimeChoose">
      <template v-slot:custom>
        <view style="padding: 0 30rpx;padding-bottom: 20rpx;" class="flex-ali-cen">
          <picker @change="bindPickerChangeShop" :value="shopIndex"
                  :range="shopList.map(item=>item.shop_alias)">
            <view class="flex-row flex-jus-bet" style="width: 100%;flex: 1">
              <view class="flex-row">
                <view class="f-s-28" style="color: var(--grey-text);">当前门店：</view>
                <view class="f-s-28" style="color: var(--white-text);align-items: center;">
                  {{ shopList[shopIndex].shop_alias }}
                </view>
              </view>
              <view class="flex-row">
                <view class="f-s-28" style="color: #0A84FF;align-items: center">
                  切换门店
                </view>
                <view style="margin-left: 4rpx">
                  <uni-icons type="down" size="14" color="#0A84FF"></uni-icons>
                </view>
              </view>

            </view>
          </picker>
        </view>
      </template>
    </customRangeAna>
    <view class="vncos-cells background-white"
          :style="{'margin': navigateHeight + 'px 12px 0 12px' , 'border-radius': '12px', 'padding-right': '10px'}">
      <view class="cell-icon" style="height: 48px">
        <image class="icon" src="/static/image/icon-medal.svg" mode="aspectFit"/>
        <view class="title">
          <text class="fr17">最高消费台</text>
        </view>
        <text class="subtitle color-b1">{{ max_room.max_room_name.number }}</text>
      </view>
      <view class="cell-item" style="height: auto; padding-top:8px; padding-bottom:8px">
        <view class="title column-box">
          <view class='box-item'>
            <view class='name'>
              <text class="fr18">{{ max_room.max_room_sales.number }}
                <text class="color-bl-b1">
                  <text class="subtitle fr14" style="padding-left: 5px;">销售</text>
                </text>
              </text>
            </view>
          </view>
          <view class='box-item'>
            <text class='name color-b2' style="padding-top: 10px;"></text>
          </view>
        </view>
        <view class="subtitle">
          <text class="fr20 color-b2">¥{{ max_room.max_room_money.number }}</text>
        </view>
      </view>
    </view>
    <view class="vncos-cells background-white noborder" style="margin: 10px 12px 0 12px; border-radius: 12px">
      <view class="cell-item">
        <text class="title fr18">桌台概述</text>
      </view>
      <view class="cell-item" style="height: auto;padding-right: 30rpx">
        <view class="grids wrap" style="padding-top:10rpx; border-bottom:none;box-sizing: border-box">
          <template v-for="(item, key) in roomOverview">
            <view class='box wrap' style="width: calc((100% - 10rpx)/3)">
              <view class='number fr18'>
                <text :class="{fr15: key === 'max_room_name' || key === 'max_room_sales'}">{{ item.number }}</text>
                <text class="unit color-light-gray">{{ item.unit }}</text>
              </view>
              <text class='detail fr14 color-bl-b3'>{{ item.title }}</text>
            </view>
            <view class="border-r" v-if="item.showBorder"/>
          </template>
        </view>
      </view>
    </view>
    <view class="vncos-cells noborder" style="margin-top: 10px">
      <view class="cell-item">
        <text class="title fr18">{{ typeDataIndex == 0 ? '桌台类型' : '桌台区域' }}</text>
        <view class="subtitle">
          <view class="flex-button tab radius-left" :class="[typeDataIndex === 0 ? 'blue-default' : 't24']"
                style="height: auto" data-type="0" @click="onTypeChanged">
            <text class="fr14">桌台类型</text>
          </view>
          <view class="flex-button tab radius-right" :class="[typeDataIndex === 1 ? 'blue-default' : 't24']"
                style="height: auto" data-type="1" @click="onTypeChanged">
            <text class="fr14">桌台区域</text>
          </view>
        </view>
      </view>
      <view class="cell-grid-box">
        <view class="grid-item-card equal_3" style="" v-for="item in roomTypeData.list">
          <view class="item-cell item-header flexCenter">
            <view class="title">
              <text class="fr16">{{ item.name }}</text>
            </view>
          </view>
          <view class="item-cell">
            <view class="customer flexCenter background-white">
              <template v-for="kv in item.items">
                <text class="fr16 color-b2" style="padding-top: 8px">{{ kv.value }}
                  <text class="fr13 color-light-gray">{{ kv.unit }}</text>
                </text>
                <text class="fr14 color-bl-b3" style="padding-top:4px">{{ kv.title }}</text>
              </template>
            </view>
          </view>
        </view>
        <view class="grid-item-card equal_3" style="" v-for="item in roomTypeData.more" v-if="roomTypeData.showMore">
          <view class="item-cell item-header flexCenter">
            <view class="title">
              <text class="fr16">{{ item.name }}</text>
            </view>
          </view>
          <view class="item-cell">
            <view class="customer flexCenter background-white">
              <template v-for="kv in item.items">
                <text class="fr16 color-b2" style="padding-top: 8px">{{ kv.value }}
                  <text class="fr13 color-light-gray">{{ kv.unit }}</text>
                </text>
                <text class="fr14 color-bl-b3" style="padding-top:4px">{{ kv.title }}</text>
              </template>
            </view>
          </view>
        </view>
      </view>
      <view class="cell-item">
        <view class="title flexCenter color-blue-default fr16" :data-type="typeDataIndex" @click="openMore"
              v-if="roomTypeData.more.length > 0">{{ roomTypeData.showMore ? '收缩' : '展开更多' }}
        </view>
      </view>
    </view>
    <view class="vncos-cells noborder">
      <view class="cell-item" style="height: auto">
        <text class="title fr18">台情概况</text>
        <text class="subtitle">注：范围20:00 - 06:00</text>
      </view>
      <view class="cell-item noborder" style="height: auto; padding: 12px 14px">
        <table class="table-equal">
          <thead class="header">
          <tr>
            <td>时段/H</td>
            <td>进店</td>
            <td>离店</td>
            <td>满台率</td>
            <td>营业额</td>
            <td>累计营业</td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in analyRoomOverview">
            <td>{{ item.query_time }}</td>
            <td>
              <view class="progress-blue" :style="{width: (item.open_room >= 100 ? 100 : item.open_room) + '%'}"
                    style="height: 23px"></view>
              <text class="float-text color-b2">{{ item.open_room }}</text>
            </td>
            <td>
              <view class="progress-yellow-dark"
                    :style="{width: (item.leave_room >= 100 ? 100 : item.leave_room) + '%'}"
                    style="height: 23px"></view>
              <text class="float-text color-b2">{{ item.leave_room }}</text>
            </td>
            <td>
              <view class="progress-green"
                    :style="{width: (parseFloat(item.room_rate) >= 100 ? 100 : parseFloat(item.room_rate)) + '%'}"
                    style="height: 23px"></view>
              <text class="float-text color-b2">{{ item.room_rate }}%</text>
            </td>
            <td class="fr15 color-b2">{{ item.business_money }}
              <text class="fr13 color-light-gray" style="padding-left: 3px">{{ item.business_money_unit }}</text>
            </td>
            <td class="fr15 color-b2">{{ item.total_business_money }}
              <text class="fr13 color-light-gray" style="padding-left: 3px">{{ item.total_business_money_unit }}</text>
            </td>
          </tr>
          </tbody>
        </table>
      </view>
    </view>
    <view class="vncos-cells noborder">
      <view class="cell-item">
        <text class="title fr18">来源占比</text>
      </view>
      <view class="cell-grid-box" v-for="item in roomDataFrom.list">
        <view class="grid-item-card full-width"
              style="margin-left: 10px; margin-right: 10px; min-width: 240rpx;height: auto; padding:10px">
          <view class="item-cell item-header">
            <view class="title">
              <text class="fr16 color-b2">{{ item.from_name }}（总订台：{{ item.open_number }} 桌）</text>
            </view>
          </view>
          <view class="item-cell">
            <view class="customer background-white" style="padding: 0">
              <view class="grids wrap equal-parts"
                    style="margin-top:2px; padding-top: 10px; padding-bottom: 10px; border-bottom: none">
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>有效台：</text>
                    <text class="color-b2 fr15">{{ item.effective_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>无效台：</text>
                    <text class="color-b2 fr15">{{ item.invalid_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均优惠：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_discount_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>消费：</text>
                    <text class="color-b2 fr15">{{ item.total_money }}
                      <text class="fr13 color-light-gray">{{ item.total_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>实收：</text>
                    <text class="color-b2 fr15">{{ item.fact_money }}
                      <text class="fr13 color-light-gray">{{ item.fact_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>签送：</text>
                    <text class="color-b2 fr15">{{ item.sign_money }}
                      <text class="fr13 color-light-gray">{{ item.sign_money_unit }}</text>
                    </text>
                  </view>
                </view>

                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>优惠：</text>
                    <text class="color-b2 fr15">{{ item.discount_money }}
                      <text class="fr13 color-light-gray">{{ item.discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均消：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 30%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'></text>
                    <text class="color-b2 fr15"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cell-grid-box" v-for="item in roomDataFrom.more" v-if="roomDataFrom.showMore">
        <view class="grid-item-card full-width"
              style="margin-left: 10px; margin-right: 10px; min-width: 240rpx;height: auto; padding:10px">
          <view class="item-cell item-header">
            <view class="title">
              <text class="fr16 color-b2">{{ item.from_name }}（总订台：{{ item.open_number }} 桌）</text>
            </view>
          </view>
          <view class="item-cell">
            <view class="customer background-white" style="padding: 0">
              <view class="grids wrap equal-parts"
                    style="margin-top:2px; padding-top: 10px; padding-bottom: 10px; border-bottom: none">
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>有效台：</text>
                    <text class="color-b2 fr15">{{ item.effective_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>无效台：</text>
                    <text class="color-b2 fr15">{{ item.invalid_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均优惠：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_discount_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>消费：</text>
                    <text class="color-b2 fr15">{{ item.total_money }}
                      <text class="fr13 color-light-gray">{{ item.total_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>实收：</text>
                    <text class="color-b2 fr15">{{ item.fact_money }}
                      <text class="fr13 color-light-gray">{{ item.fact_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>签送：</text>
                    <text class="color-b2 fr15">{{ item.sign_money }}
                      <text class="fr13 color-light-gray">{{ item.sign_money_unit }}</text>
                    </text>
                  </view>
                </view>

                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>优惠：</text>
                    <text class="color-b2 fr15">{{ item.discount_money }}
                      <text class="fr13 color-light-gray">{{ item.discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均消：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 30%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'></text>
                    <text class="color-b2 fr15"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cell-item">
        <view class="title flexCenter color-blue-default fr16" data-type="3" @click="openMore"
              v-if="roomDataFrom.more.length > 0">{{ roomDataFrom.showMore ? '收缩' : '展开更多' }}
        </view>
      </view>
    </view>

    <view class="vncos-cells noborder">
      <view class="cell-item">
        <text class="title fr18">消费区间</text>
        <text class="subtitle">注：区间都以元为单位</text>
      </view>
      <view class="cell-grid-box" v-for="item in consumeRangeMoney.list">
        <view class="grid-item-card full-width"
              style="margin-left: 10px; margin-right: 10px; min-width: 240rpx;height: auto; padding:10px">
          <view class="item-cell item-header">
            <view class="title">
              <text class="fr16 color-b2">{{ item.range_name }}（总订台：{{ item.open_number }} 桌）</text>
            </view>
          </view>
          <view class="item-cell">
            <view class="customer background-white" style="padding: 0">
              <view class="grids wrap equal-parts"
                    style="margin-top:2px; padding-top: 10px; padding-bottom: 10px; border-bottom: none">
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>有效台：</text>
                    <text class="color-b2 fr15">{{ item.effective_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>无效台：</text>
                    <text class="color-b2 fr15">{{ item.invalid_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均优惠：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_discount_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>消费：</text>
                    <text class="color-b2 fr15">{{ item.total_money }}
                      <text class="fr13 color-light-gray">{{ item.total_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>实收：</text>
                    <text class="color-b2 fr15">{{ item.fact_money }}
                      <text class="fr13 color-light-gray">{{ item.fact_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>签送：</text>
                    <text class="color-b2 fr15">{{ item.sign_money }}
                      <text class="fr13 color-light-gray">{{ item.sign_money_unit }}</text>
                    </text>
                  </view>
                </view>

                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>优惠：</text>
                    <text class="color-b2 fr15">{{ item.discount_money }}
                      <text class="fr13 color-light-gray">{{ item.discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均消：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 30%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'></text>
                    <text class="color-b2 fr15"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cell-grid-box" v-for="item in consumeRangeMoney.more" v-if="consumeRangeMoney.showMore">
        <view class="grid-item-card full-width"
              style="margin-left: 10px; margin-right: 10px; min-width: 240rpx;height: auto; padding:10px">
          <view class="item-cell item-header">
            <view class="title">
              <text class="fr16 color-b2">{{ item.range_name }}（总订台：{{ item.open_number }} 桌）</text>
            </view>
          </view>
          <view class="item-cell">
            <view class="customer background-white" style="padding: 0">
              <view class="grids wrap equal-parts"
                    style="margin-top:2px; padding-top: 10px; padding-bottom: 10px; border-bottom: none">
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>有效台：</text>
                    <text class="color-b2 fr15">{{ item.effective_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>无效台：</text>
                    <text class="color-b2 fr15">{{ item.invalid_number }}</text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均优惠：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_discount_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>消费：</text>
                    <text class="color-b2 fr15">{{ item.total_money }}
                      <text class="fr13 color-light-gray">{{ item.total_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>实收：</text>
                    <text class="color-b2 fr15">{{ item.fact_money }}
                      <text class="fr13 color-light-gray">{{ item.fact_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>签送：</text>
                    <text class="color-b2 fr15">{{ item.sign_money }}
                      <text class="fr13 color-light-gray">{{ item.sign_money_unit }}</text>
                    </text>
                  </view>
                </view>

                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>优惠：</text>
                    <text class="color-b2 fr15">{{ item.discount_money }}
                      <text class="fr13 color-light-gray">{{ item.discount_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 31%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'>均消：</text>
                    <text class="color-b2 fr15">{{ item.avg_room_money }}
                      <text class="fr13 color-light-gray">{{ item.avg_room_money_unit }}</text>
                    </text>
                  </view>
                </view>
                <view class='box left' style="width: 30%; padding: 6px 4px">
                  <view class="field">
                    <text class='fr15 color-light-gray'></text>
                    <text class="color-b2 fr15"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="cell-item">
        <view class="title flexCenter color-blue-default fr16" data-type="4" @click="openMore"
              v-if="consumeRangeMoney.more.length > 0">{{ consumeRangeMoney.showMore ? '收缩' : '展开更多' }}
        </view>
      </view>
      <view class="cell-item noborder" style="height: auto">
        <text class="title">排队数据</text>
      </view>
      <view class="cell-item noborder" style="height: auto; padding: 10px 12px">
        <view class="grids wrap" style="padding-top:10rpx; border-bottom:none">
          <view class='box'>
            <view class='number'>
              <text class="">{{ queueData.queue_number }}</text>
              <text class="unit">桌</text>
            </view>
            <text class='detail'>总排队</text>
          </view>
          <view class="border-r"/>
          <view class='box'>
            <view class='number'>
              <text class="">{{ queueData.queue_effective_number }}</text>
              <text class="unit">桌</text>
            </view>
            <text class='detail'>有效（已安排）</text>
          </view>
          <view class="border-r"/>
          <view class='box'>
            <view class='number'>
              <text class="">{{ queueData.queue_rate }}</text>
              <text class="unit">%</text>
            </view>
            <text class='detail'>占比</text>
          </view>
          <view class="border-r"/>
          <view class='box'>
            <view class='number'>
              <text class="">{{ queueData.queue_invalid_number }}</text>
              <text class="unit">桌</text>
            </view>
            <text class='detail'>无效</text>
          </view>
        </view>
      </view>
    </view>

    <view class="vncos-cells background-white noborder"
          style="margin: 10px 10px 0 10px; border-radius: 12px; padding-right: 10px">
      <view class="cell-item flexCenter" style="height: auto">
        <view class="title">
          <customRangeAna id="page-top-navigate" :is-back="false" :is-fixed="false" :show-tabs="false" :tab-index="3"
                          @update-between-time="openRoomTrendBetweenTime"
                          @between-choose-index="openRoomTrendTabIndex"/>
        </view>
      </view>
      <view class="cell-item noborder flexCenter" style="height: auto;">
        <text class="color-light-gray fr14">注： 时间区间只少7天，默认 最近7天</text>
      </view>
      <view class="cell-item noborder" style="height: auto; padding: 12px 14px">
        <view class="title column-box">
          <view class='box-item'>
            <view class='name'>
              <text>开台走势</text>
            </view>
          </view>
          <view class='box-item'>
            <text class='smalltext color-bl-b1'>有效开台数分营销开台以及自来客开台</text>
          </view>
        </view>
      </view>
      <view class="cell-item" style="height: 440rpx; padding: 8px 4px">
        <view class="charts-box" style="height: 100%; width: 100%;">
          <qiun-data-charts :ontouch="true" :disable-scroll="true" :background="backgroundCharts" type="column"
                            :opts="chartsOpenRoom.options" :chartData="chartsOpenRoom.data"/>
        </view>
      </view>
      <view class="cell-item" style="height: auto; padding: 12px 0 12px 14px">
        <view class="title column-box">
          <view class='box-item'>
            <view class='name'>
              <text>开台率</text>
            </view>
          </view>
          <view class='box-item'>
            <text class='smalltext color-bl-b1'>{{ showOpenRateCompareDate[0] }} 至
              {{ showOpenRateCompareDate[1] }}对比
            </text>
          </view>
        </view>
        <view class="subtitle">
          <uni-datetime-picker type="daterange" v-model="openRateCompareDate" @change="onOpenRateCompareDateChanged">
            <view class="flex-button blue-default tab">
              <text class="fr14">自定义对比</text>
            </view>
          </uni-datetime-picker>
        </view>
      </view>
      <view class="cell-item" style="height: 460rpx; width: 100%; padding: 8px 0">
        <qiun-data-charts type="area" :ontouch="true" :disable-scroll="true" :background="backgroundCharts"
                          :opts="chartsOpenRoomRate.options" :chartData="chartsOpenRoomRate.data"/>
      </view>
      <view class="cell-item" style="height: auto; padding: 12px 0 12px 14px">
        <view class="title column-box">
          <view class='box-item'>
            <view class='name'>
              <text>消费时长</text>
            </view>
          </view>
          <view class='box-item'>
            <text class='smalltext color-bl-b1'>{{ showConsumeCompareDate[0] }} 至 {{ showConsumeCompareDate[1] }}对比
            </text>
          </view>
        </view>
        <view class="subtitle">
          <uni-datetime-picker type="daterange" v-model="consumeCompareDate" @change="onConsumeCompareDateChanged">
            <view class="flex-button blue-default tab">
              <text class="fr14">自定义对比</text>
            </view>
          </uni-datetime-picker>
        </view>
      </view>
      <view class="cell-item" style="height: 512rpx; width: 100%; padding: 8px 0">
        <qiun-data-charts type="mix" :ontouch="true" :disable-scroll="true" :background="backgroundCharts"
                          :opts="chartsDuration.options" :chartData="chartsDuration.data"/>
      </view>

      <view class="cell-item" style="height: auto; padding: 12px 0 12px 14px">
        <view class="title column-box">
          <view class='box-item'>
            <view class='name'>
              <text>翻台率</text>
            </view>
          </view>
          <view class='box-item'>
            <text class='smalltext color-bl-b1'>{{ showRockRateCompareDate[0] }} 至
              {{ showRockRateCompareDate[1] }}对比
            </text>
          </view>
        </view>
        <view class="subtitle">
          <uni-datetime-picker type="daterange" v-model="rockRateCompareDate" @change="onRockRateCompareDateChanged">
            <view class="flex-button blue-default tab">
              <text class="fr14">自定义对比</text>
            </view>
          </uni-datetime-picker>
        </view>
      </view>
      <view class="cell-item" style="height: 512rpx; width: 100%; padding: 8px 0">
        <qiun-data-charts type="area" :ontouch="true" :disable-scroll="true" :background="backgroundCharts"
                          :opts="chartsRockRate.options" :chartData="chartsRockRate.data"/>
      </view>
      <view class="cell-item" style="height: auto; padding: 12px 14px">
        <view class="title column-box">
          <view class='box-item'>
            <view class='name'>
              <text>到店人数</text>
            </view>
          </view>
          <view class='box-item'>
            <text class='smalltext color-bl-b1'>到店消费顾客性别对比</text>
          </view>
        </view>
      </view>
      <view class="cell-item" style="height: 512rpx; width: 100%; padding: 8px 0">
        <qiun-data-charts type="mix" :ontouch="true" :disable-scroll="true" :background="backgroundCharts"
                          :opts="chartsEntering.options" :chartData="chartsEntering.data"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {reactive, ref, watch, getCurrentInstance} from "vue";
import customRangeAna from '@/components/customRangeAna.vue';
import {onLoad, onReady, onShow} from "@dcloudio/uni-app";

const instance = getCurrentInstance()
const commonJs = instance?.proxy?.$commonJs
const shopIndex = ref(commonJs.getChooseShopIndex())
const shopList = ref(commonJs.getShopList())
const chartsOpenRoom = ref({
  options: {
    color: ['#FDD845', '#07C160'],
    padding: [15, 0, 0, 0],
    enableScroll: true,
    touchMoveLimit: 24,
    animation: true,
    duration: 500,
    fontColor: '#9b9b9b',
    legend: {},
    xAxis: {
      disableGrid: true,
      scrollShow: false,
      scrollAlign: 'left',
      itemCount: 7,
    },
    yAxis: {
      disableGrid: false,
      gridColor: 'rgba(118, 118, 128, 0.2)',
      showTitle: false,
      data: [{
        min: 0,
        type: "value",
        axisLine: true,
        calibration: false,
        unit: "桌",
        fontSize: 13
      }],
    },
    extra: {
      column: {
        type: "group",
        width: 15,
        activeBgColor: "#1f1f1f",
        activeBgOpacity: 0.08,
        barBorderCircle: false,
        meterBorder: 1
      }
    }
  },
  data: {}
});

let chartsOpenRoomRate = reactive({
  options: {
    color: ['#07C160', '#FDD845'],
    padding: [15, 0, 0, 0],
    enableScroll: true,
    animation: true,
    duration: 500,
    dataLabel: false,
    enableMarkLine: true,
    pixelRatio: 2,
    fontColor: '#9b9b9b',
    legend: {
      position: 'bottom',
      fontColor: '#9b9b9b'
    },
    xAxis: {
      disableGrid: true,
      itemCount: 7,
      scrollShow: false
    },
    yAxis: {
      gridType: "dash",
      gridColor: 'rgba(118, 118, 128, 0.2)',
      data: [{
        min: 0,
        type: "value",
        axisLine: true,
        calibration: false,
        unit: "%",
        fontSize: 13
      }],
    },
    extra: {
      area: {
        type: "curve",
        opacity: 0.2,
        addLine: true,
        width: 2,
        gradient: false,
        activeType: "solid"
      }
    }
  },
  data: {}
});

let chartsDuration = reactive({
  options: {
    color: ['#0A84FF', '#DE868F', '#F5A623', '#7F83F7'],
    padding: [15, 0, 0, 0],
    enableScroll: true,
    animation: true,
    duration: 500,
    pixelRatio: 2,
    fontColor: '#9b9b9b',
    dataLabel: false,
    enableMarkLine: true,
    legend: {
      position: 'bottom',
      fontColor: '#9b9b9b'
    },
    xAxis: {
      disableGrid: true,
      itemCount: 7,
      scrollShow: false
    },
    yAxis: {
      gridType: "dash",
      dashLength: 2,
      gridColor: 'rgba(118, 118, 128, 0.2)',
      showTitle: true,
      data: [
        {
          position: "left",
          title: "消费时长(分)",
          min: 0,
          titleOffsetY: -7
        },
        {
          position: "right",
          title: "均消(元)",
          titleOffsetY: -7,
          min: 0
        }
      ]
    },
    extra: {
      mix: {
        column: {
          type: "group",
          width: 15,
          activeBgColor: "#1f1f1f",
          activeBgOpacity: 0.08,
          barBorderCircle: false,
          meterBorder: 1
        },
        line: {
          type: "curve",
          width: 2,
          activeType: "solid",
        }
      },
    }
  },
  data: {}
});

let chartsRockRate = reactive({
  options: {
    color: ['#07C160', '#0A84FF'],
    padding: [15, 0, 0, 0],
    enableScroll: true,
    animation: true,
    duration: 500,
    fontColor: '#9b9b9b',
    pixelRatio: 2,
    dataLabel: false,
    enableMarkLine: true,
    legend: {
      position: 'bottom',
      fontColor: '#9b9b9b'
    },
    xAxis: {
      disableGrid: true,
      itemCount: 7,
      scrollShow: false
    },
    yAxis: {
      gridType: "dash",
      dashLength: 2,
      gridColor: 'rgba(118, 118, 128, 0.2)',
      data: [{
        min: 0,
        type: "value",
        axisLine: true,
        calibration: false,
        unit: "%",
        fontSize: 13
      }],
    },
    extra: {
      area: {
        type: "curve",
        opacity: 0.2,
        addLine: true,
        width: 2,
        gradient: false,
        activeType: "solid"
      }
    }
  },
  data: {}
});

let chartsEntering = reactive({
  options: {
    color: ['#54C7FC', '#7F83F7', '#CCF783'],
    padding: [15, 0, 0, 0],
    fontColor: '#9b9b9b',
    enableScroll: true,
    animation: true,
    duration: 500,
    pixelRatio: 2,
    dataLabel: true,
    enableMarkLine: true,
    legend: {
      position: 'bottom',
      fontColor: '#9b9b9b'
    },
    xAxis: {
      disableGrid: true,
      itemCount: 7,
      scrollShow: false
    },
    yAxis: {
      gridType: "dash",
      dashLength: 2,
      gridColor: 'rgba(118, 118, 128, 0.2)',
      showTitle: false,
      data: [
        {
          position: "left",
          fontSize: 13,
          min: 0,
        },
        {
          type: "value",
          position: "right",
          min: 0,
          unit: "%",
          fontSize: 13
        }
      ]
    },
    extra: {
      mix: {
        column: {
          type: "group",
          width: 15,
          activeBgColor: "#1f1f1f",
          activeBgOpacity: 0.08,
          barBorderCircle: false,
          meterBorder: 1
        },
        line: {
          type: "curve",
          width: 2,
          activeType: "solid",
        }
      },
    }
  },
  data: {}
});

const navigateHeight = ref(112);
const betweenTime = ref([]);
const betweenTimeIndex = ref(0);
const roomTrendBetweenTimeIndex = ref(0);
const roomTrendBetweenTime = ref([]);
const safeArea = ref({top: 0, statusbarHeight: 0, bottom: 0});
const typeDataIndex = ref(0);
const backgroundCharts = ref("rgba(254,255,255,0.7)");
const queueData = ref({
  queue_number: 0,
  queue_effective_number: 0,
  queue_invalid_number: 0,
  queue_rate: 0,
});
const openRateCompareDate = ref([]);
const consumeCompareDate = ref([]);
const rockRateCompareDate = ref([]);
const showOpenRateCompareDate = ref([]);
const showConsumeCompareDate = ref([]);
const showRockRateCompareDate = ref([]);
const max_room = ref({
  max_room_name: {title: '最高消费台', number: 0, unit: ''},
  max_room_sales: {title: '所属销售', number: 0, unit: ''},
  max_room_money: {title: '消费金额', number: '0.00', unit: '元'}
});
const roomOverview = ref({
  open_room: {title: '开台数', number: 0, unit: '桌', showBorder: true},
  invalid_number: {title: '无效', number: 0, unit: '桌', showBorder: true},
  valid_number: {title: '有效台', number: '0', unit: '桌', showBorder: false},
  open_room_rate: {title: '开台率', number: 0, unit: '%', showBorder: true},
  reach_low_consume: {title: '达低消', number: 0, unit: '桌', showBorder: true},
  no_reach_low_consume: {title: '未达低消', number: 0, unit: '桌', showBorder: false},
  rock_number_rate: {title: '翻台', number: 0, unit: '桌', showBorder: true},
  rock_rate: {title: '翻台率', number: 0, unit: '%', showBorder: true},
  guest_number: {title: '⾃来客', number: 0, unit: '桌', showBorder: false},
  guest_number_rate: {title: '⾃来客占比', number: 0, unit: '%', showBorder: true},
  sale_number_rate: {title: '销售', number: 0, unit: '桌', showBorder: true},
  sale_rate: {title: '销售台占比', number: 0, unit: '%', showBorder: false},
  room_average_consume: {title: '桌均消费', number: 0, unit: '元', showBorder: true},
  mt: {title: '美团', number: 0, unit: '桌', showBorder: true},
  tiktok: {title: '抖音', number: 0, unit: '桌', showBorder: false},
  coupon: {title: '优惠卷', number: 0, unit: '桌', showBorder: true},
  customer: {title: '总人数', number: 0, unit: '人', showBorder: true},
  guest: {title: '自来客', number: 0, unit: '人', showBorder: false},
  salesperson: {title: '销售', number: 0, unit: '人', showBorder: true},
  gender: {title: '男 / 女', number: '0 / 0', unit: '', showBorder: true},
  averageDuration: {title: '均消费时长', number: 0, unit: '分钟', showBorder: false},
});
const analyRoomOverview = ref([]);
const roomTypeData = ref({
  list: [],
  more: [],
  showMore: false,
});
const roomDataFrom = ref({
  list: [],
  more: [],
  showMore: false
});
const consumeRangeMoney = ref({
  list: [],
  more: [],
  showMore: false
});
let typeDataList = [{list: [], more: [], showMore: false}, {list: [], more: [], showMore: false}];
let currentRoomBetweenTime = [];

onLoad((options) => {
  safeArea.value = commonJs.getSafeAreaPadding();
  let system = commonJs.getSystemInfo();
  if (typeof system.theme != 'undefined' && system.theme === 'dark') {
    backgroundCharts.value = "rgba(29,29,29,0.7)";
  }
  uni.onThemeChange(function (res) {
    if (res.theme === "dark") {
      backgroundCharts.value = "rgba(29,29,29,0.7)";
    } else {
      backgroundCharts.value = "rgba(254,255,255,0.7)";
    }
  });
});

/**
 * 门店切换
 * @param e
 */
const bindPickerChangeShop = (e)=>{
  if (e.detail.value >= 0 && e.detail.value != commonJs.systemConfig.shopIndex) {
    shopIndex.value = e.detail.value
    commonJs.systemConfig.shopIndex = e.detail.value
    commonJs.setStorage(
        'shopIndex',
        e.detail.value,
        function () {
          commonJs.logger.debug('设置门店成功！')
        }
    )
    getRoomOverview(betweenTime.value, true);
    getDataRoomType(betweenTime.value, true);
    getDataRoomArea(betweenTime.value, true);
    getDataRoomOverview(betweenTime.value, true);
    getDataRoomFrom(betweenTime.value, true);
    getDataRangeMoney(betweenTime.value, true);

    getDataOpenTrend(roomTrendBetweenTime.value, true);
    getDataPerson(roomTrendBetweenTime.value, true);
    getDataOpenRate(roomTrendBetweenTime.value, openRateCompareDate.value, true);
    getDataOpenTime(roomTrendBetweenTime.value, consumeCompareDate.value, true);
    getDataOpenRock(roomTrendBetweenTime.value, rockRateCompareDate.value, true);
  }
}
onReady(() => {
  uni.createSelectorQuery().select("#page-top-navigate").boundingClientRect((result) => {
    navigateHeight.value = parseInt(result.height) + 14;
  }).exec();
});

const handleBetweenTimeChoose = (index) => {
  betweenTimeIndex.value = index
}

const handleBetweenTime = (timeRange) => {
  betweenTime.value = timeRange
}

const openRoomTrendTabIndex = (index) => {
  roomTrendBetweenTimeIndex.value = index
}

const openRoomTrendBetweenTime = (timeRange) => {
  roomTrendBetweenTime.value = timeRange
}

watch(betweenTime, (newValue, oldValue) => {
  if (oldValue.length < 1 || newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
    getRoomOverview(newValue, true);
    getDataRoomType(newValue, true);
    getDataRoomArea(newValue, true);
    getDataRoomOverview(newValue, true);
    getDataRoomFrom(newValue, true);
    getDataRangeMoney(newValue, true);
  }
}, {
  deep: true
});

watch(roomTrendBetweenTime, (newValue, oldValue) => {
  if (oldValue.length < 1 || newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
    let offsetDays = dateDiffDays(newValue[0], newValue[1]);
    if (offsetDays < 7) {
      newValue = getDateRange(newValue[0], 1, 8);
      offsetDays = dateDiffDays(newValue[0], newValue[1]);
    }
    currentRoomBetweenTime = newValue;
    getDataOpenTrend(newValue, true);
    getDataPerson(newValue, true);
    openRateCompareDate.value = getDateRange(newValue[0], -(offsetDays - 1), Math.abs(offsetDays) + 1);
    consumeCompareDate.value = commonJs.clone(openRateCompareDate.value);
    rockRateCompareDate.value = commonJs.clone(openRateCompareDate.value);
  }
});

watch(openRateCompareDate, (newValue, oldValue) => {
  if (oldValue.length < 1 || newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
    let iSourceDays = dateDiffDays(currentRoomBetweenTime[0], currentRoomBetweenTime[1]);
    let iCompareDays = dateDiffDays(newValue[0], newValue[1]);
    if (iCompareDays < iSourceDays) {
      newValue = getDateRange(newValue[0], 1, Math.abs(iSourceDays) + 1);
    }
    showOpenRateCompareDate.value = newValue;
    getDataOpenRate(currentRoomBetweenTime, newValue, true);
  }
});

watch(consumeCompareDate, (newValue, oldValue) => {
  if (oldValue.length < 1 || newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
    let iSourceDays = dateDiffDays(currentRoomBetweenTime[0], currentRoomBetweenTime[1]);
    let iCompareDays = dateDiffDays(newValue[0], newValue[1]);
    if (iCompareDays < iSourceDays) {
      newValue = getDateRange(newValue[0], 1, Math.abs(iSourceDays) + 1);
    }
    showConsumeCompareDate.value = newValue;
    getDataOpenTime(currentRoomBetweenTime, newValue, true);
  }
});

watch(rockRateCompareDate, (newValue, oldValue) => {
  if (oldValue.length < 1 || newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
    let iSourceDays = dateDiffDays(currentRoomBetweenTime[0], currentRoomBetweenTime[1]);
    let iCompareDays = dateDiffDays(newValue[0], newValue[1]);
    if (iCompareDays < iSourceDays) {
      newValue = getDateRange(newValue[0], 1, Math.abs(iSourceDays) + 1);
    }
    showRockRateCompareDate.value = newValue;
    getDataOpenRock(currentRoomBetweenTime, newValue, true);
  }
});

const dateDiffDays = (date1, date2) => {
  let d1 = new Date(date1);
  let d2 = new Date(date2);
  let diffTime = d2.getTime() - d1.getTime();
  return Math.round(diffTime / (1000 * 3600 * 24));
}

const getRoomOverview = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1],
  }
  commonJs.queryCache('/app/analyse/getRoomOverview', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let overview = data;
        if (typeof overview === 'object' && Object.keys(overview).length > 0) {
          roomOverview.value.open_room.number = numberFormat(parseInt(overview.open_room_all_number));
          roomOverview.value.invalid_number.number = parseInt(overview.invalid_number);
          roomOverview.value.valid_number.number = numberFormat(parseInt(overview.effective_number));
          roomOverview.value.open_room_rate.number = round(parseFloat(overview.open_rate), 2);
          roomOverview.value.reach_low_consume.number = numberFormat(parseInt(overview.reach_number));
          roomOverview.value.no_reach_low_consume.number = numberFormat(parseInt(overview.no_reach_number));
          roomOverview.value.rock_number_rate.number = numberFormat(parseInt(overview.rock_number));
          roomOverview.value.rock_rate.number = round(parseFloat(overview.rock_rate), 2);
          roomOverview.value.guest_number.number = numberFormat(parseInt(overview.guest_number));
          roomOverview.value.guest_number_rate.number = round(parseFloat(overview.guest_rate), 2);
          roomOverview.value.sale_number_rate.number = numberFormat(parseInt(overview.sales_number));
          roomOverview.value.sale_rate.number = round(parseFloat(overview.sales_rate), 2);
          if (roomOverview.value.room_average_consume.number > 10000) {
            roomOverview.value.room_average_consume.unit = "万";
            roomOverview.value.room_average_consume.number = round(roomOverview.value.room_average_consume.number / 10000, 2);
          } else {
            roomOverview.value.room_average_consume.number = numberFormat(round(parseFloat(overview.avg_room_money), 2));
            roomOverview.value.room_average_consume.unit = "元";
          }
          roomOverview.value.mt.number = numberFormat(parseInt(overview.mt_number));
          roomOverview.value.tiktok.number = numberFormat(parseInt(overview.dy_number));
          roomOverview.value.coupon.number = numberFormat(parseInt(overview.coupon_number));
          roomOverview.value.customer.number = numberFormat(parseInt(overview.all_person));
          roomOverview.value.guest.number = numberFormat(parseInt(overview.guest_person));
          roomOverview.value.salesperson.number = numberFormat(parseInt(overview.sales_person));
          roomOverview.value.gender.number = numberFormat(parseInt(overview.man_number)) + ' / ' + numberFormat(parseInt(overview.woman_number));
          //roomOverview.value.woman.number = parseInt(overview.woman_number);
          roomOverview.value.averageDuration.number = numberFormat(parseInt(overview.consumption_duration));
          queueData.value.queue_number = numberFormat(parseInt(overview.queue_number));
          queueData.value.queue_effective_number = numberFormat(parseInt(overview.queue_effective_number));
          queueData.value.queue_invalid_number = numberFormat(parseInt(overview.queue_invalid_number));
          queueData.value.queue_rate = round(parseFloat(overview.queue_rate), 2);

          max_room.value.max_room_name.number = overview.max_room;
          max_room.value.max_room_sales.number = overview.max_room_sales;
          max_room.value.max_room_money.number = numberFormat(round(parseFloat(overview.max_room_money), 2));
        }
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const getDataRoomType = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1],
  }
  commonJs.queryCache('/app/analyse/getDataRoomType', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        typeDataList[0].list = [];
        typeDataList[0].more = [];
        data.forEach((item) => {
          let business_money_unit = '元';
          let avg_room_money_unit = '元';
          let guest_money_unit = '元';
          let sales_money_unit = '元';

          if (parseFloat(item.avg_room_money) > 10000) {
            item.avg_room_money = round(parseFloat((item.avg_room_money) / 10000), 2);
            avg_room_money_unit = '万';
          } else {
            item.avg_room_money = numberFormat(round(parseFloat(item.avg_room_money), 2));
          }
          if (parseFloat(item.business_money) > 10000) {
            item.business_money = round(parseFloat((item.business_money) / 10000), 2);
            business_money_unit = '万';
          } else {
            item.business_money = numberFormat(round(parseFloat(item.business_money), 2));
          }
          if (parseFloat(item.sales_money) > 10000) {
            item.sales_money = round(parseFloat((item.sales_money) / 10000), 2);
            sales_money_unit = '万';
          } else {
            item.sales_money = numberFormat(round(parseFloat(item.sales_money), 2));
          }
          if (parseFloat(item.guest_money) > 10000) {
            item.guest_money = round(parseFloat((item.guest_money) / 10000), 2);
            guest_money_unit = '万';
          } else {
            item.guest_money = numberFormat(round(parseFloat(item.guest_money), 2));
          }
          item.effective_number = parseInt(item.effective_number);
          item.guest_number = parseInt(item.guest_number);
          item.guest_rate = round(parseFloat(item.guest_rate), 2);
          item.sales_rate = round(parseFloat(item.sales_rate), 2);
          item.sales_number = parseInt(item.sales_number);

          let value = {
            name: item.type_name,
            items: [
              {title: '营业额', value: item.business_money, unit: business_money_unit},
              {title: '平均消费', value: item.avg_room_money, unit: avg_room_money_unit},
              {title: '销售/自来台', value: item.sales_number + ' / ' + item.guest_number, unit: '桌'},
              {title: '销售所占金额', value: item.sales_money, unit: sales_money_unit},
              {title: '销售金额占比', value: item.sales_rate, unit: '%'},
              {title: '自来客金额', value: item.guest_money, unit: guest_money_unit},
              {title: '自来金额占比', value: item.guest_rate, unit: '%'},
            ]
          }

          if (typeDataList[0].list.length < 3) {
            typeDataList[0].list.push(value);
          } else {
            typeDataList[0].more.push(value);
          }
        });

        if (typeDataIndex.value === 0) {
          roomTypeData.value.list = typeDataList[0].list;
          roomTypeData.value.more = typeDataList[0].more;
          roomTypeData.value.showMore = false;
        }
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

/**
 * 格式化数字
 * @param number
 * @return {number|string}
 */
const numberFormat = (number) => {
  let formated = [];
  let counter = 0;
  if (typeof number != 'undefined') {
    let string = Number(number).toString();
    let split = string.split('.');
    let ret = split[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
    if (split.length > 1) {
      ret += '.' + split[1];
    }
    return ret;
  } else {
    return 0;
  }
}

/**
 * @param number
 * @param precision
 * @return {number}
 */
const round = (number, precision) => {
  return Math.round(+number + "e" + precision) / Math.pow(10, precision);
}

const getDataRoomArea = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1]
  }
  commonJs.queryCache('/app/analyse/getDataRoomArea', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        typeDataList[1].list = [];
        typeDataList[1].more = [];
        data.forEach((item) => {
          let business_money_unit = '元';
          let avg_room_money_unit = '元';
          let guest_money_unit = '元';
          let sales_money_unit = '元';

          if (parseFloat(item.avg_room_money) > 10000) {
            item.avg_room_money = round(parseFloat((item.avg_room_money) / 10000), 2);
            avg_room_money_unit = '万';
          } else {
            item.avg_room_money = numberFormat(round(parseFloat(item.avg_room_money), 2));
          }
          if (parseFloat(item.business_money) > 10000) {
            item.business_money = round(parseFloat((item.business_money) / 10000), 2);
            business_money_unit = '万';
          } else {
            item.business_money = numberFormat(round(parseFloat(item.business_money), 2));
          }
          if (parseFloat(item.sales_money) > 10000) {
            item.sales_money = round(parseFloat((item.sales_money) / 10000), 2);
            sales_money_unit = '万';
          } else {
            item.sales_money = numberFormat(round(parseFloat(item.sales_money), 2));
          }
          if (parseFloat(item.guest_money) > 10000) {
            item.guest_money = round(parseFloat((item.guest_money) / 10000), 2);
            guest_money_unit = '万';
          } else {
            item.guest_money = numberFormat(round(parseFloat(item.guest_money), 2));
          }
          item.effective_number = parseInt(item.effective_number);
          item.guest_number = parseInt(item.guest_number);
          item.guest_rate = round(parseFloat(item.guest_rate), 2);
          item.sales_rate = round(parseFloat(item.sales_rate), 2);
          item.sales_number = parseInt(item.sales_number);

          let value = {
            name: item.area_name,
            items: [
              {title: '营业额', value: item.business_money, unit: business_money_unit},
              {title: '平均消费', value: item.avg_room_money, unit: avg_room_money_unit},
              {title: '销售/自来台', value: item.sales_number + ' / ' + item.guest_number, unit: '桌'},
              {title: '销售所占金额', value: item.sales_money, unit: sales_money_unit},
              {title: '销售金额占比', value: item.sales_rate, unit: '%'},
              {title: '自来客金额', value: item.guest_money, unit: guest_money_unit},
              {title: '自来金额占比', value: item.guest_rate, unit: '%'},
            ]
          }

          if (typeDataList[1].list.length < 3) {
            typeDataList[1].list.push(value);
          } else {
            typeDataList[1].more.push(value);
          }
        });
        if (typeDataIndex.value === 1) {
          roomTypeData.value.list = typeDataList[1].list;
          roomTypeData.value.more = typeDataList[1].more;
          roomTypeData.value.showMore = false;
        }
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const onTypeChanged = (ev) => {
  let type = parseInt(ev.currentTarget.dataset.type);
  if (!isNaN(type) && type !== typeDataIndex.value) {
    typeDataIndex.value = type;
    if (type === 0) {
      getDataRoomType(betweenTime.value, true);
      roomTypeData.value.showMore = false;
      /*if (typeDataList[0].list.length < 1) {
          getDataRoomType(betweenTime.value, true);
      }
      else {
          roomTypeData.value.list = typeDataList[0].list;
          roomTypeData.value.more = typeDataList[0].more;
          roomTypeData.value.showMore = false;
      }*/
    } else if (type === 1) {
      getDataRoomArea(betweenTime.value, true);
      roomTypeData.value.showMore = false;
      /*if (typeDataList[1].list.length < 1) {
          getDataRoomArea(betweenTime.value, true);
      }
      else {
          roomTypeData.value.list = typeDataList[1].list;
          roomTypeData.value.more = typeDataList[1].more;
          roomTypeData.value.showMore = false;
      }*/
    }
  }
}

const openMore = (ev) => {
  let type = parseInt(ev.currentTarget.dataset.type);
  if (!isNaN(type)) {
    if (type === 3) {
      roomDataFrom.value.showMore = !roomDataFrom.value.showMore;
    } else if (type === 4) {
      consumeRangeMoney.value.showMore = !consumeRangeMoney.value.showMore;
    } else {
      roomTypeData.value.showMore = !roomTypeData.value.showMore;
    }
  }
}

const getDataRoomOverview = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1]
  }
  commonJs.queryCache('/app/analyse/getDataRoomOverview', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        analyRoomOverview.value = data.map((item) => {
          if (parseFloat(item.business_money) > 10000) {
            item.business_money = round((parseFloat(item.business_money) / 10000), 2);
            item.business_money_unit = '万';
          } else {
            item.business_money = numberFormat(Math.round(parseInt(item.business_money)));
            item.business_money_unit = '元';
          }
          if (parseFloat(item.total_business_money) > 10000) {
            item.total_business_money = round(parseFloat(item.total_business_money) / 10000, 2);
            item.total_business_money_unit = '万';
          } else {
            item.total_business_money = numberFormat(Math.round(parseInt(item.total_business_money)));
            item.total_business_money_unit = '元';
          }
          return item;
        });
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const getDataRoomFrom = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1]
  }
  commonJs.queryCache('/app/analyse/getDataRoomFrom', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let dataList = {list: [], more: []};
        data.forEach(item => {
          if (parseFloat(item.total_money) > 10000) {
            item.total_money = round(parseFloat(item.total_money) / 10000, 2);
            item.total_money_unit = '万';
          } else {
            item.total_money = numberFormat(Math.round(parseInt(item.total_money)));
            item.total_money_unit = '元';
          }
          if (parseFloat(item.fact_money) > 10000) {
            item.fact_money = round(parseFloat(item.fact_money) / 10000, 2);
            item.fact_money_unit = '万';
          } else {
            item.fact_money = numberFormat(Math.round(parseInt(item.fact_money)));
            item.fact_money_unit = '元';
          }
          if (parseFloat(item.sign_money) > 10000) {
            item.sign_money = round(parseFloat(item.sign_money) / 10000, 2);
            item.sign_money_unit = '万';
          } else {
            item.sign_money = numberFormat(Math.round(parseInt(item.sign_money)));
            item.sign_money_unit = '元';
          }
          if (parseFloat(item.discount_money) > 10000) {
            item.discount_money = round(parseFloat(item.discount_money) / 10000, 2);
            item.discount_money_unit = '万';
          } else {
            item.discount_money = numberFormat(Math.round(parseInt(item.discount_money)));
            item.discount_money_unit = '元';
          }
          if (parseFloat(item.avg_room_money) > 10000) {
            item.avg_room_money = round(parseFloat(item.avg_room_money) / 10000, 2);
            item.avg_room_money_unit = '万';
          } else {
            item.avg_room_money = numberFormat(Math.round(parseInt(item.avg_room_money)));
            item.avg_room_money_unit = '元';
          }
          if (parseFloat(item.avg_room_discount_money) > 10000) {
            item.avg_room_discount_money = round(parseFloat(item.avg_room_discount_money) / 10000, 2);
            item.avg_room_discount_money_unit = '万';
          } else {
            item.avg_room_discount_money = numberFormat(Math.round(parseInt(item.avg_room_discount_money)));
            item.avg_room_discount_money_unit = '元';
          }
          if (dataList.list.length < 2) {
            dataList.list.push(item);
          } else {
            dataList.more.push(item);
          }
          item.effective_number = numberFormat(item.effective_number);
          item.invalid_number = numberFormat(item.invalid_number);
        });
        roomDataFrom.value.list = dataList.list;
        roomDataFrom.value.more = dataList.more;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const getDataRangeMoney = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1]
  }
  commonJs.queryCache('/app/analyse/getDataRangeMoney', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let dataList = {list: [], more: []};
        data.forEach(item => {
          if (parseFloat(item.total_money) > 10000) {
            item.total_money = round(parseFloat(item.total_money) / 10000, 2);
            item.total_money_unit = '万';
          } else {
            item.total_money = numberFormat(Math.round(parseInt(item.total_money)));
            item.total_money_unit = '元';
          }
          if (parseFloat(item.fact_money) > 10000) {
            item.fact_money = round(parseFloat(item.fact_money) / 10000, 2);
            item.fact_money_unit = '万';
          } else {
            item.fact_money = numberFormat(Math.round(parseInt(item.fact_money)));
            item.fact_money_unit = '元';
          }
          if (parseFloat(item.sign_money) > 10000) {
            item.sign_money = round(parseFloat(item.sign_money) / 10000, 2);
            item.sign_money_unit = '万';
          } else {
            item.sign_money = numberFormat(Math.round(parseInt(item.sign_money)));
            item.sign_money_unit = '元';
          }
          if (parseFloat(item.discount_money) > 10000) {
            item.discount_money = round(parseFloat(item.discount_money) / 10000, 2);
            item.discount_money_unit = '万';
          } else {
            item.discount_money = numberFormat(Math.round(parseInt(item.discount_money)));
            item.discount_money_unit = '元';
          }
          if (parseFloat(item.avg_room_money) > 10000) {
            item.avg_room_money = round(parseFloat(item.avg_room_money) / 10000, 2);
            item.avg_room_money_unit = '万';
          } else {
            item.avg_room_money = numberFormat(Math.round(parseInt(item.avg_room_money)));
            item.avg_room_money_unit = '元';
          }
          if (parseFloat(item.avg_room_discount_money) > 10000) {
            item.avg_room_discount_money = round(parseFloat(item.avg_room_discount_money) / 10000, 2);
            item.avg_room_discount_money_unit = '万';
          } else {
            item.avg_room_discount_money = numberFormat(Math.round(parseInt(item.avg_room_discount_money)));
            item.avg_room_discount_money_unit = '元';
          }
          item.effective_number = numberFormat(item.effective_number);
          item.invalid_number = numberFormat(item.invalid_number);

          if (dataList.list.length < 2) {
            dataList.list.push(item);
          } else {
            dataList.more.push(item);
          }
        });
        consumeRangeMoney.value.list = dataList.list;
        consumeRangeMoney.value.more = dataList.more;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
  // skApi.getDataRangeMoney(dateRange[0], dateRange[1], enableExpire, {
  //   onSuccess(res) {
  //     let dataList = {list: [], more: []};
  //     res.data.data.forEach(item => {
  //       if (parseFloat(item.total_money) > 10000) {
  //         item.total_money = round(parseFloat(item.total_money) / 10000, 2);
  //         item.total_money_unit = '万';
  //       } else {
  //         item.total_money = numberFormat(Math.round(parseInt(item.total_money)));
  //         item.total_money_unit = '元';
  //       }
  //       if (parseFloat(item.fact_money) > 10000) {
  //         item.fact_money = round(parseFloat(item.fact_money) / 10000, 2);
  //         item.fact_money_unit = '万';
  //       } else {
  //         item.fact_money = numberFormat(Math.round(parseInt(item.fact_money)));
  //         item.fact_money_unit = '元';
  //       }
  //       if (parseFloat(item.sign_money) > 10000) {
  //         item.sign_money = round(parseFloat(item.sign_money) / 10000, 2);
  //         item.sign_money_unit = '万';
  //       } else {
  //         item.sign_money = numberFormat(Math.round(parseInt(item.sign_money)));
  //         item.sign_money_unit = '元';
  //       }
  //       if (parseFloat(item.discount_money) > 10000) {
  //         item.discount_money = round(parseFloat(item.discount_money) / 10000, 2);
  //         item.discount_money_unit = '万';
  //       } else {
  //         item.discount_money = numberFormat(Math.round(parseInt(item.discount_money)));
  //         item.discount_money_unit = '元';
  //       }
  //       if (parseFloat(item.avg_room_money) > 10000) {
  //         item.avg_room_money = round(parseFloat(item.avg_room_money) / 10000, 2);
  //         item.avg_room_money_unit = '万';
  //       } else {
  //         item.avg_room_money = numberFormat(Math.round(parseInt(item.avg_room_money)));
  //         item.avg_room_money_unit = '元';
  //       }
  //       if (parseFloat(item.avg_room_discount_money) > 10000) {
  //         item.avg_room_discount_money = round(parseFloat(item.avg_room_discount_money) / 10000, 2);
  //         item.avg_room_discount_money_unit = '万';
  //       } else {
  //         item.avg_room_discount_money = numberFormat(Math.round(parseInt(item.avg_room_discount_money)));
  //         item.avg_room_discount_money_unit = '元';
  //       }
  //       item.effective_number = numberFormat(item.effective_number);
  //       item.invalid_number = numberFormat(item.invalid_number);
  //
  //       if (dataList.list.length < 2) {
  //         dataList.list.push(item);
  //       } else {
  //         dataList.more.push(item);
  //       }
  //     });
  //     consumeRangeMoney.value.list = dataList.list;
  //     consumeRangeMoney.value.more = dataList.more;
  //   },
  //   onFail(code, errData, error) {
  //     skBase.showToast(error);
  //   },
  //   onComplete(code, res, error) {
  //   },
  //   beforeRequest(queryParam) {
  //   }
  // });
}

const getDataOpenTrend = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1]
  }
  commonJs.queryCache('/app/analyse/getDataOpenTrend', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let chartsData = {
          categories: [],
          series: [
            {
              name: "营销台",
              data: []
            },
            {
              name: "自来客台",
              data: []
            }
          ]
        };
        data.forEach(item => {
          let splitDate = item.date.split('-');
          if (splitDate.length > 2) {
            chartsData.categories.push(splitDate[2]);
          }
          chartsData.series[0].data.push(item.sales_number);
          chartsData.series[1].data.push(item.guest_number);
        });
        chartsOpenRoom.value.data = chartsData;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const getDataOpenRate = (dateRange, compareDate, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1],
    'compare_begin_date': compareDate[0],
    'compare_end_date': compareDate[1],
  }
  commonJs.queryCache('/app/analyse/getDataOpenRate', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let chartsData = {
          categories: [],
          series: [
            {
              name: "开台率",
              data: [],
              legendShape: 'line',
            },
            {
              name: "对比",
              data: [],
              legendShape: 'line',
            }
          ]
        };
        data.forEach(item => {
          let splitDate = item.date.split('-');
          if (splitDate.length > 2) {
            chartsData.categories.push(splitDate[2]);
          }
          chartsData.series[0].data.push(item.open_rate);
          chartsData.series[1].data.push(item.compare_open_rate);
        });
        chartsOpenRoomRate.data = chartsData;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const getDateRange = (strDate, offset, dayCount) => {
  let begin = getBarTimeRange(strDate, offset, 0);
  let end = getBarTimeRange(begin.beginDate, dayCount, 0);
  return [begin.beginDate, end.beginDate];
}

const onOpenRateCompareDateChanged = (rangeDate) => {
  let compareDate = getDateRange(rangeDate[0], 1, 7);
  if (compareDate[0] !== openRateCompareDate.value[0] || compareDate[1] !== openRateCompareDate.value[1]) {
    openRateCompareDate.value = compareDate;
  }
}


/**
 * @param iTime
 * @return {{month: string, hour: string, year: number, day: string, minute: string, second: string}}
 */
const timeString = (iTime)=>{
  let dt;
  if ((!isNaN(parseInt(iTime)) && iTime > 0)) {
    if (iTime.toString().length == 10) {
      iTime *= 1000;
    }
    dt = new Date(iTime);
  }
  else {
    dt = new Date();
  }
  return {
    year: dt.getFullYear(),
    month: padStart(dt.getMonth() + 1, 2, 0),
    day: padStart(dt.getDate(), 2, 0),
    hour: padStart(dt.getHours(), 2, 0),
    minute: padStart(dt.getMinutes(), 2, 0),
    second: padStart(dt.getSeconds(), 2, 0)
  };
}

/**
 * @param value
 * @param maxLength
 * @param fillString
 * @return {string}
 */
const padStart = (value, maxLength, fillString)=>{
  let ret = '';
  if (isNotEmpty(value)) {
    for (let i = 0; i < (maxLength - value.toString().length); i++) {
      ret = fillString.toString() + ret;
    }
    ret += value.toString();
  }
  else {
    for (let i = 0; i < maxLength; i++) {
      ret = fillString.toString() + ret;
    }
  }
  return ret;
}

/**
 * @param str
 * @return {boolean}
 */
const isNotEmpty = (str)=>{
  return !isEmpty(str);
}

/**
 * @param strDate
 * @param offset
 * @param type
 * @return {{beginObject: {month: string, hour: string, year: number, day: string, minute: string, second: string}, end: string, begin: string, endObject: {month: string, hour: string, year: number, day: string, minute: string, second: string}}}
 */
const getBarTimeRange = (strDate, offset, type) => {
  let result = null;
  let currentDate = null;
  let timeObject = null;
  if (type === 0) {
    currentDate = strtotime(strDate, offset);
    let timeTest = timeString(currentDate.getTime());
    let currentToday = timeTest.year + '-' + timeTest.month + '-' + timeTest.day;

    if (parseInt(timeTest.hour) > 11) {
      timeObject = timeTest;
    } else {
      timeObject = timeString(strtotime(currentToday, -1).getTime());
    }
    let today = timeObject.year + '-' + timeObject.month + '-' + timeObject.day;
    let beginTime = today + ' 12:00:00';
    let beginDate = today;
    let tomorrow = timeString(strtotime(today, 1).getTime());
    let endTime = tomorrow.year + '-' + tomorrow.month + '-' + tomorrow.day + ' 12:00:00';
    let endDate = tomorrow.year + '-' + tomorrow.month + '-' + tomorrow.day;
    result = {
      begin: beginTime,
      end: endTime,
      'beginDate': beginDate,
      'endDate': endDate,
      beginObject: timeObject,
      endObject: tomorrow
    };
  } else {
    let tempDate = (strDate != null && strDate.length >= 10) ? strtotime(strDate, offset) : new Date();
    if (offset !== 0) {
      tempDate.setMonth(tempDate.getMonth() + offset);
      currentDate = new Date(tempDate);
    } else {
      currentDate = tempDate;
    }
    let beginMonth = timeString(currentDate.getTime());
    let nextMonth = timeString(new Date(currentDate.setMonth(currentDate.getMonth() + 1)).getTime());
    let beginTime = beginMonth.year + '-' + beginMonth.month + '-01  12:00:00';
    let beginDate = beginTime;
    let endTime = nextMonth.year + '-' + nextMonth.month + '-01  12:00:00';
    let endDate = nextMonth.year + '-' + nextMonth.month;
    result = {
      begin: beginTime,
      'beginDate': beginDate,
      end: endTime,
      'endDate': endDate,
      beginObject: beginMonth,
      endObject: nextMonth
    };
  }
  return result;
}


/**
 * string date
 * @param {string/Date} strtime 2022-10-10
 * @param {Number} addday 1 day
 * @returns {Date}
 */
const strtotime = (strtime, addday) => {
  let dt;
  if (strtime instanceof Date) {
    dt = strtime;
  } else {
    if (!isEmpty(strtime) && strtime.length >= 10) {
      dt = new Date(strtime);
    } else {
      dt = new Date();
    }
  }
  if (typeof addday != 'undefined' && isNumeric(addday)) {
    dt = new Date(dt.setDate(dt.getDate() + Number(addday)));
  }
  return dt;
}

/**
 * @param str
 * @return {boolean}
 */
const isEmpty = (str) => {
  if (typeof str == 'undefined' || str == null) {
    return true;
  } else if (typeof str == "string" && str.length > 0) {
    return false;
  } else if (typeof str == 'object' && Object.keys(str).length > 0) {
    return false;
  } else if (str instanceof Array && str.length > 0) {
    return false;
  } else if (isNumeric(str)) {
    return false;
  } else {
    return true;
  }
}

/**
 * @param str
 * @return {boolean}
 */
const isNumeric = (str) => {
  if (typeof str == 'undefined' || str == null) {
    return false;
  } else {
    return !isNaN(parseFloat(str)) && isFinite(str);
  }
}

const
onConsumeCompareDateChanged = (rangeDate) => {
  let compareDate = getDateRange(rangeDate[0], 1, 7);
  if (compareDate[0] !== consumeCompareDate.value[0] || compareDate[1] !== consumeCompareDate.value[1]) {
    consumeCompareDate.value = compareDate;
  }
}

const onRockRateCompareDateChanged = (rangeDate) => {
  let compareDate = getDateRange(rangeDate[0], 1, 7);
  if (compareDate[0] !== consumeCompareDate.value[0] || compareDate[1] !== consumeCompareDate.value[1]) {
    rockRateCompareDate.value = compareDate;
  }
}

const getDataOpenTime = (dateRange, compareDate, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1],
    'compare_begin_date': compareDate[0],
    'compare_end_date': compareDate[1],
  }
  commonJs.queryCache('/app/analyse/getDataOpenTime', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let chartsData = {
          categories: [],
          series: [
            {
              name: "消费时长",
              data: [],
              type: 'column',
              legendShape: 'rect',
              index: 0
            },
            {
              name: "对比时长",
              data: [],
              type: 'column',
              legendShape: 'rect',
              index: 0
            },
            {
              name: "桌均消",
              data: [],
              type: 'line',
              legendShape: 'line',
              style: 'curve',
              addPoint: true,
              index: 1
            },
            {
              name: "对比均消",
              type: 'line',
              data: [],
              legendShape: 'line',
              style: 'curve',
              addPoint: true,
              index: 1
            }
          ]
        };
        data.forEach(item => {
          let splitDate = item.date.split('-');
          if (splitDate.length > 2) {
            chartsData.categories.push(splitDate[2]);
          }
          chartsData.series[0].data.push(item.consumption_duration);
          chartsData.series[1].data.push(item.compare_consumption_duration);
          chartsData.series[2].data.push(parseFloat(item.avg_room_money));
          chartsData.series[3].data.push(parseFloat(item.compare_avg_room_money));
        });
        chartsDuration.data = chartsData;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})

}

const getDataOpenRock = (dateRange, compareDate, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1],
    'compare_begin_date': compareDate[0],
    'compare_end_date': compareDate[1],
  }
  commonJs.queryCache('/app/analyse/getDataOpenRock', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let chartsData = {
          categories: [],
          series: [
            {
              name: "翻台率",
              data: [],
              legendShape: 'line',
            },
            {
              name: "对比",
              data: [],
              legendShape: 'line',
            }
          ]
        };
        data.forEach(item => {
          let splitDate = item.date.split('-');
          if (splitDate.length > 2) {
            chartsData.categories.push(splitDate[2]);
          }
          chartsData.series[0].data.push(item.rock_rate);
          chartsData.series[1].data.push(item.compare_rock_rate);
        });
        chartsRockRate.data = chartsData;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const getDataPerson = (dateRange, enableExpire) => {
  const params = {
    'begin_date': dateRange[0],
    'end_date': dateRange[1],
  }
  commonJs.queryCache('/app/analyse/getDataPerson', params, {
    before() {
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        let chartsData = {
          categories: [],
          series: [
            {
              name: "男",
              data: [],
              type: 'column',
              legendShape: 'rect',
              index: 0,
            },
            {
              name: "女",
              data: [],
              type: 'column',
              legendShape: 'rect',
              index: 0
            },
            {
              name: "女（占比）",
              data: [],
              type: 'line',
              legendShape: 'line',
              style: 'curve',
              index: 1,
              addPoint: true
            },
          ]
        };
        data.forEach(item => {
          let splitDate = item.date.split('-');
          if (splitDate.length > 2) {
            chartsData.categories.push(splitDate[2]);
          }
          chartsData.series[0].data.push(item.man_number);
          chartsData.series[1].data.push(item.woman_number);
          chartsData.series[2].data.push(parseFloat(item.woman_rate));
        });
        chartsEntering.data = chartsData;
      } catch (error) {
        commonJs.showMessage(error)
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}
</script>

<style scoped lang="css">
@import '/static/style/skbase.css';

.page {
  width: 100%;
  height: 100%;
}

@media (prefers-color-scheme: dark) {
  .text-light {
    color: rgba(235, 235, 235, 0.5) !important;
  }

  .progress-blue {
    background: #07a6b8;
  }

  .progress-yellow-dark {
    background: #ca6703;
  }

  .progress-green {
    background: #029774;
  }
}

@media (prefers-color-scheme: light) {
  .color-bl-b1 {
    color: #9f9c9c !important;
  }

  .progress-blue {
    background: rgba(7, 166, 184, 0.3);
  }

  .progress-yellow-dark {
    background: rgba(202, 103, 3, 0.3);
  }

  .progress-green {
    background: rgba(2, 151, 116, 0.3);
  }
}


</style>
